<!DOCTYPE html>
<html lang="ch" xmlns:th="https://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>V视界后台管理</title>
    <link rel="stylesheet" href="../iconfont/iconfont.css" type="text/css" th:href="@{/static/iconfont/iconfont.css}">
    <link rel="stylesheet" href="../css/backstage.css" th:href="@{/static/css/backstage.css}">
    <link rel="stylesheet" href="../customAlertConfirm/customAlertConfirm.css" th:href="@{/static/customAlertConfirm/customAlertConfirm.css}">

</head>

<body>
<div class="outerBox">
    <div class="headerBox">
        <div class="logoBox">
            <img src="../static/img/logo.png" alt="logo" class="logo" th:src="@{/static/img/logo.png}">
        </div>
        <div class="titleBox">
            <h1>V视界后台管理</h1>
        </div>
        <div class="managerBox">
            <span>你好,<i th:text="${username}">username</i></span>
            <a th:href="@{/manager/managerLogout}" class="exit">退出</a>
        </div>
    </div>
    <div class="navBox">

        <ul class="navList userNav">
            <a th:href="@{/user/userList}">
                <li class="navLi">
                    <i class="iconfont icon-geren">用户管理</i>
                </li>
            </a>
            <a th:href="@{/manager/getHotSearchBlog}">
                <li class="navLi">
                    <i class="iconfont icon-bowenshu">博文管理</i>
                </li>
            </a>
            <a th:href="@{/blog/getAuditBlogList}">
                <li class="navLi">
                    <i class="iconfont icon-shenhe">博文审核</i>
                </li>
            </a>
            <li class="navLi active">
                <i class="iconfont icon-leimupinleifenleileibie">类别管理</i>
            </li>
            <a th:href="@{/manager/getReportForManager}" methods="post">
                <li class="navLi">
                    <i class="iconfont">&#xe6d6;举报处理</i>
                </li>
            </a>
        </ul>
    </div>
    <div class="opeBox">
        <ul class="opeList">
            <li class="opeLi show">
                <div class="cateManage">
                    <h2 class="opeTitle">类别</h2>
                    <div class="cateOpe">
                        <form class="seaCateForm forms" th:action="@{/manager/typeList}">
                            <input type="text" name="type" id="cateSea" placeholder="请输入类别名称">
                            <input type="hidden" name="pageNo" class="typePageNo">
                            <button class="seaCateBtn">搜索</button>
                        </form>
                        <form class="addCateForm form-group forms" th:action="@{/manager/addType}">
                            <input type="text" name="type" id="addCate" placeholder="请输入类名">
                            <button class="addCateBtn">添加类别</button>
                        </form>
                    </div>
                    <div class="tableBox">
                        <table class="cateTable infoTable">
                            <thead>
                            <tr>
                                <th>类名</th>
                                <th>博文条数</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <script th:inline="javascript">
                                let type=[[${pageBean}]]
                                console.log(type)
                            </script>
                            <tr th:each="types:${pageBean.rows}">
                                <td th:text="${types.type}"></td>
                                <td th:text="${types.num}"></td>
                                <td>
                                    <a class="delTypeBtn" th:attr="data-typeid=${types.id}">删除</a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="pageBox catePage">
                        <div>
                            <button class="catePrePage"><</button>
                            <button class="showCatePage showPage" style="width: 35px;cursor: inherit;">0</button>
                            <button class="cateNextPage">></button>
                        </div>
                        <div class="showCateTotalPage showTotalPage">共0页</div>
                        <div>
                            <form class="catePageForm pageForm" th:action="@{/manager/typeList}" method="get">
                                到第<input type="number" name="pageNo" class="catePageNo"  step="any">页
                                <button>跳转</button>
                            </form>
                            <form class="hiddenCatePageForm hidden" th:action="@{/manager/typeList}" method="get">
                                <input type="number" name="pageNo" class="hiddenCatePageNo">
                            </form>
                        </div>
                        <script type="text/javascript" th:inline="javascript">
                            // 若直接将pagecount设置为1，则因为表单提交时的网页刷新导致pagecount重新变回1，所以要将其以会话储存的方式保存
                            var typePageCount = sessionStorage.getItem('typePageCount') || 1
                            let totalNumber = [[${pageBean.total}]]
                            let totalPage = Math.ceil(totalNumber / 10)
                            const catePrePage = document.querySelector('.catePrePage')
                            const cateNextPage = document.querySelector('.cateNextPage')
                            const showCateTotalPage=document.querySelector('.showCateTotalPage')
                            const showCatePage=document.querySelector('.showCatePage')
                            const hiddenCatePageForm=document.querySelector('.hiddenCatePageForm')
                            const catePageForm=document.querySelector('.catePageForm')
                            showCateTotalPage.innerHTML=`共${totalPage}页`
                            showCatePage.innerHTML=`${typePageCount}`
                            //分别为上一页、下一页添加点击事件
                            catePrePage.addEventListener('click', () => {
                                // 判断页码数大小，小于等于1则返回，并提示信息
                                if (typePageCount <= 1) {
                                    showCustomAlert('当前已是第一页', false)
                                    return
                                }
                                // 若没问题则对PageCount--，调用方法重新渲染用户信息
                                typePageCount--
                                updatePageNumber()
                            })

                            cateNextPage.addEventListener('click', () => {
                                // 大于等于最大页码数时，返回，提示信息
                                if (typePageCount >= totalPage) {
                                    showCustomAlert('当前已是最后一页', false)
                                    return
                                }
                                // 否侧进行++，调用方法
                                typePageCount++
                                updatePageNumber()
                            })

                            const addCateForm=document.querySelector('.addCateForm')
                            addCateForm.addEventListener('submit',(e)=>{
                                e.preventDefault()
                                typePageCount=totalPage
                                updatePageNumber()
                                addCateForm.submit()
                            })

                            function updatePageNumber() {
                                // 将userPageCount储存在会话储存中，防止页面刷新导致pagecount丢失
                                sessionStorage.setItem('typePageCount', typePageCount)
                                hiddenCatePageForm.pageNo.value = typePageCount
                                hiddenCatePageForm.submit()
                            }
                            catePageForm.addEventListener('submit',(e)=>{
                                e.preventDefault()
                                if(catePageForm.pageNo.value<=0||catePageForm.pageNo.value>totalPage||!(catePageForm.pageNo.value%1 === 0)){
                                    showCustomAlert('输入的页码数有误，请重新输入',false)
                                    catePageForm.reset()
                                }else{
                                    typePageCount=catePageForm.pageNo.value
                                    sessionStorage.setItem('typePageCount', typePageCount)
                                    catePageForm.submit()
                                }
                            })
                        </script>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="../../static/customAlertConfirm/customAlertConfirm.js" th:src="@{/static/customAlertConfirm/customAlertConfirm.js}"></script>
<script  th:src="@{/static/js/backstage-typeManage.js}"></script>
</html>